<template>
  <div class="page-container">
    <h2>订单管理</h2>

    <!-- 待签合同 -->
    <div v-if="ordersByStatus['-2'].length > 0" class="status-section">
      <h3>待签合同</h3>
      <el-table :data="ordersByStatus['-2']" style="width: 100%" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号"></el-table-column>
        <el-table-column prop="house.title" label="房屋标题"></el-table-column>
        <el-table-column
          prop="customer.name"
          label="租户姓名"
        ></el-table-column>
        <el-table-column prop="owner.name" label="房东姓名"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 待付款 -->
    <div v-if="ordersByStatus['-1'].length > 0" class="status-section">
      <h3>待付款</h3>
      <el-table :data="ordersByStatus['-1']" style="width: 100%" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号"></el-table-column>
        <el-table-column prop="house.title" label="房屋标题"></el-table-column>
        <el-table-column
          prop="customer.name"
          label="租户姓名"
        ></el-table-column>
        <el-table-column prop="owner.name" label="房东姓名"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 生效中 -->
    <div v-if="ordersByStatus['0'].length > 0" class="status-section">
      <h3>生效中</h3>
      <el-table :data="ordersByStatus['0']" style="width: 100%" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号"></el-table-column>
        <el-table-column prop="house.title" label="房屋标题"></el-table-column>
        <el-table-column
          prop="customer.name"
          label="租户姓名"
        ></el-table-column>
        <el-table-column prop="owner.name" label="房东姓名"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 已退租 -->
    <div v-if="ordersByStatus['1'].length > 0" class="status-section">
      <h3>已退租</h3>
      <el-table :data="ordersByStatus['1']" style="width: 100%" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号"></el-table-column>
        <el-table-column prop="house.title" label="房屋标题"></el-table-column>
        <el-table-column
          prop="customer.name"
          label="租户姓名"
        ></el-table-column>
        <el-table-column prop="owner.name" label="房东姓名"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 待审核 -->
    <div v-if="ordersByStatus['2'].length > 0" class="status-section">
      <h3>待审核</h3>
      <el-table :data="ordersByStatus['2']" style="width: 100%" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号"></el-table-column>
        <el-table-column prop="house.title" label="房屋标题"></el-table-column>
        <el-table-column
          prop="customer.name"
          label="租户姓名"
        ></el-table-column>
        <el-table-column
          prop="customer.phone"
          label="租户手机号"
        ></el-table-column>
        <el-table-column prop="owner.name" label="房东姓名"></el-table-column>
        <el-table-column
          prop="customer.phone"
          label="房东手机号"
        ></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="退租原因" width="200">
          <template #default="scope">
            {{ scope.row.reason }}
          </template>
        </el-table-column>
        <el-table-column label="拒绝原因" width="200">
          <template #default="scope">
            {{ scope.row.refusalReason }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleApprove(scope.row)"
              >同意退组</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handleRefuse(scope.row)"
              >拒绝退租</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 拒绝退租 -->
    <div v-if="ordersByStatus['3'].length > 0" class="status-section">
      <h3>拒绝退租</h3>
      <el-table :data="ordersByStatus['3']" style="width: 100%" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号"></el-table-column>
        <el-table-column prop="house.title" label="房屋标题"></el-table-column>
        <el-table-column
          prop="customer.name"
          label="租户姓名"
        ></el-table-column>
        <el-table-column prop="owner.name" label="房东姓名"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="拒绝原因" width="200">
          <template #default="scope">
            {{ scope.row.refusalReason }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import api from "@/api";
import { ElMessage } from "element-plus";

const orders = ref([]);
const ordersByStatus = ref({
  "-2": [],
  "-1": [],
  0: [],
  1: [],
  2: [],
  3: [],
});

async function fetchOrders() {
  try {
    const response = await api.order.getOrderList();
    orders.value = response.data.data;
    groupOrdersByStatus();
  } catch (error) {
    console.error("Failed to fetch orders:", error);
  }
}

function groupOrdersByStatus() {
  ordersByStatus.value = {
    "-2": [],
    "-1": [],
    0: [],
    1: [],
    2: [],
    3: [],
  };
  orders.value.forEach((order) => {
    if (ordersByStatus.value.hasOwnProperty(String(order.status))) {
      ordersByStatus.value[String(order.status)].push(order);
    }
  });
}

onMounted(() => {
  fetchOrders();
});
function getStatusText(status) {
  switch (status) {
    case -2:
      return "待签合同";
    case -1:
      return "待付款";
    case 0:
      return "生效中";
    case 1:
      return "已退租";
    case 2:
      return "待审核";
    case 3:
      return "申请退租";
    default:
      return "未知状态";
  }
}

function getStatusTagType(status) {
  switch (status) {
    case -2:
      return "info";
    case -1:
      return "warning";
    case 0:
      return "success";
    case 1:
      return "danger";
    case 2:
      return "primary";
    case 3:
      return "danger";
    default:
      return "";
  }
}
async function handleApprove(order) {
  await api.order.agreeOrder(order.id);
  ElMessage.success("已同意退租请求");
  fetchOrders();
}
async function handleRefuse(order) {}
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.status-section {
  margin-bottom: 20px;
}

.el-table th {
  background-color: #f5f7fa;
}

.el-table__row {
  height: 48px;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}
</style>
